<template>
	<div class="screen1-module3-content" ref="content">
		<div class="chart-view" ref="chart"></div>
		<div class="desc-view">
			<table>
				<thead><tr>
					<th>总货位数</th>
					<th>存货货位</th>
					<th>托盘货位</th>
					<th>空余货位</th>
				</tr></thead>
				<tbody><tr>
					<td>{{dataSource.ALL_Count}}</td>
					<td>{{dataSource.Material_Count}}</td>
					<td>{{dataSource.Salver_Count}}</td>
					<td>{{dataSource.FREE_Count}}</td>
				</tr></tbody>
			</table>
		</div>
	</div>
</template>

<script setup>
import { ref, onBeforeUnmount, toRefs, getCurrentInstance, onMounted } from 'vue';
import * as echarts from 'echarts';
import { eleResize } from '@/assets/js/utils'	
	
const instance = getCurrentInstance()
const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {
				ALL_Count:1000,
				Material_Count:800,
				Salver_Count:100,
				FREE_Count:100
			}
		}
	}
})
const {dataSource} = toRefs(props)

let $frame = null;
let $dom = null;
let myChart = null;
const defaultOption = {
	tooltip: {
		trigger: 'item'
	},
	series: [
		{
			name: '库存情况',
			type: 'pie',
			selectedMode: 'single',
			radius: '60%',
			label:{
				formatter: '{fc|{b}}\n{hr|}\n{fc|{d}%} ',
				rich: {
					fc: {
						color: '#afd7da',
						fontSize:12,
						lineHeight:16,
						align: 'center'
					},
					hr: {
						borderColor: '#afd7da',
						width: '100%',
						borderWidth: 1,
						height: 0
					}
				}
			},
			labelLine:{
				length:5,
				length2:5
			},
			data: [
				{ value: 30, name: '存货', selected:true, itemStyle:{color:'#fc3321'} },
				{ value: 70, name: '托盘', itemStyle:{color:'#01beee'} },
				{ value: 10, name: '空余', itemStyle:{color:'#00ff12'} }
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}
	]
}

const createChart = function(){
	if (!$dom) {
		$dom = instance.refs.chart;
		myChart = echarts.init($dom)
	}
}

const drawChart = function(){
	destoryChart()
	if (!dataSource.value.ALL_Count) return false;
	let opt = JSON.parse(JSON.stringify(defaultOption))
	opt.series[0].data[0].value = dataSource.value.Material_Count || 0;
	opt.series[0].data[1].value = dataSource.value.Salver_Count || 0;
	opt.series[0].data[2].value = dataSource.value.FREE_Count || 0;
	createChart()
	myChart.setOption(opt)
}

const destoryChart = function(){
	try{
		myChart.dispose();
		$dom.innerHTML = '';
		myChart = null;
		$dom = null;
	}catch(e){
		//TODO handle the exception
	}
}

/* 创建div宽高变化监听器 */
const createEleResize = function(){
	$frame = instance.refs.content;
	eleResize.on($frame, drawChart);
}

/* div宽高变化事件移除 */
const destroyEleResize=function(){
	try{
		eleResize.off($frame, drawChart);
		$frame = null
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	createEleResize()
})

onBeforeUnmount(()=>{
	destroyEleResize()
	destoryChart()
})

defineExpose({drawChart})
</script>

<style lang="scss" scoped>
.screen1-module3-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	.desc-view{
		height: .7em;
		flex-shrink: 0;
		table{
			width: 100%;
			td,th{
				text-align: center;
				vertical-align: middle;
			}
			th{
				color: #1792b6;
				font-size: .2em;
				padding: .2em;
			}
			td{
				color:#d3ffff;
				font-size: .24em;
				padding: .2em;
			}
		}
	}
	.chart-view{
		flex-grow: 1;
	}
}
</style>